<template>
  <div id="page-cost-detail">
    <h2>{{ activity.act_name }} - 费用明细</h2>

    <card class="mt10">
      <div class="m10 clearfix">
        <Button type="info" class="fr" @click="showCreateModal()">新增费用</Button>
      </div>

      <Table
        :columns="columns"
        :data="list"
        :loading="loading"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>

    <update-modal :form="form" @submit="getList"></update-modal>
    <detail-modal :form="detailForm"></detail-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import activityApi from '@/api/activity'
  import detailModal from './components/cost-detail/detail-modal'
  import updateModal from './components/cost-detail/update-modal'

  export default {
    name: 'page-cost-detail',
    components: {
      detailModal,
      updateModal
    },
    props: [
      'activity'
    ],
    data () {
      let activityId = this.$route.params.activityId
      return {
        loading: false,
        query: {
          pkActBaseInfo: activityId,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '费用类型',
            key: 'costTypeName',
            width: 150,
            render: (h, params) => {
              let { row } = params
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '-10px'
                  },
                  on: {
                    click: () => {
                      this.showDetailModal(params.row)
                    }
                  }
                }, row.costTypeName)
              ])
            }

          },
          {
            title: '费用用途',
            key: 'costUsed'
          },
          {
            title: '数量',
            width: 150,
            key: 'costNum'
          },
          {
            title: '费用',
            width: 150,
            key: 'costCash'
          },
          {
            title: '时间',
            width: 180,
            render: (h, params) => {
              let { row } = params
              return moment(row.costTime).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '操作',
            width: 200,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showUpdateModal(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.onRemove(params.row)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        list: [],
        detailForm: {
          visible: false,
          data: {},
          template: {}
        },
        form: {
          visible: false,
          data: {},
          template: {
            costNum: 0,
            costCash: 0
          }
        }
      }
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.loading = true
        const { body } = await activityApi.costDetail.list(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      showDetailModal (detail) {
        this.detailForm.data = Object.assign({}, detail)
        this.detailForm.visible = true
      },
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      async showUpdateModal (detail) {
        const { body } = await activityApi.costDetail.detail({
          pkActCost: detail.pkActCost
        })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = body.responseData
          this.form.visible = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
        this.form.data = Object.assign({}, detail)
        this.form.visible = true
      },
      onRemove (detail) {
        this.$Modal.confirm({
          title: '确认删除吗',
          content: '<p>删除后将不能恢复，确定删除？</p>',
          onOk: () => {
            this.remove(detail)
          }
        })
      },
      async remove (detail) {
        const { body } = await activityApi.costDetail.remove({ pkBackSupport: detail.pkBackSupport })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('删除成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>
